<template>
	<div class="herb-search-page search-page-box">
		<div class="search-cont page-cont-box">
			<BreadCrumb :data="dataObj.crumbList" />
			<div class="crose-ui-pie" v-if="router.currentRoute.value.query.origin == 'header'">
				<div class="echart-item">
					<uiEchart :config="optionFloavor" ref="chartFloavor" :vt="dataObj.echartoptVt1" @clk="clkFloavor"/>
				</div>
				<div class="echart-item">
					<uiEchart :config="optionProperty" ref="chartProperty" :vt="dataObj.echartoptVt1" @clk="clkProperty"/>
				</div>
				<div class="echart-item">
					<uiEchart :config="optionMeridians" ref="chartMeridians" :vt="dataObj.echartoptVt1" @clk="clkMeridians"/>
				</div>
			</div>
			<div class="total-box" v-if="dataObj.queryTy == 1">
				<div class="total-wrap">
					<div class="tatal-cont">
						<div class="locate-box">
							<el-image class="search-img" :src="searchImg" fit="contain" />
						</div>
						<div class="tatal-txt" v-lang="{lang: controlSto.language, lgid: -19}">Herb</div>
						<div class="tatal-txt" v-lang="{lang: controlSto.language, lgid: -42}">Total</div>
						<div class="tatal-txt">:</div>
						<div class="tatal-txt">{{dataObj.searchResultTotal}}</div>
					</div>
					<div class="more-box">
						<div class="more-wrap" @click.stop="toMore">
							<div class="more-txt" v-lang="{lang: controlSto.language, lgid: -43}">More</div>
							<div class="more-img-box">
								<el-image class="more-img" :src="moreImg" fit="contain" />
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="condition-box">
				<div class="condition-left search-cond-left">
					<SearchDrop class="cond-item">
						<template #title>
							<span v-lang="{lang: controlSto.language, lgid: -44}">List sort</span>
						</template>
						<template #dropcont>
							<div class="cond-drop-cont-wrap">
								<el-radio-group v-model="condObj.sort" @change="toSearch()">
									<div class="cond-radio-wrap">
										<el-radio class="cond-radio-item" value="Asc"><span v-lang="{lang: controlSto.language, lgid: -49}"></span></el-radio>
										<el-radio class="cond-radio-item" value="Desc"><span v-lang="{lang: controlSto.language, lgid: -50}"></span></el-radio>
									</div>
								</el-radio-group>
							</div>
						</template>
					</SearchDrop>

					<SearchDrop class="cond-item">
						<template #title>
							<span v-lang="{lang: controlSto.language, lgid: -48}">Flavor</span>
							<!-- <el-popover placement="top-start">
								<el-checkbox class="all-choose-cls"
									v-model="condObj.FlavorAll"
									@change="allChooseFlavor"
								>
								<span @click.stop="condObj.FlavorAll = !condObj.FlavorAll" v-lang="{lang: controlSto.language, lgid: -130}">select all</span>
							</el-checkbox>
								<template #reference>
									<span v-lang="{lang: controlSto.language, lgid: -48}">Flavor</span>
								</template>
							</el-popover> -->
						</template>
						<template #dropcont>
							<div class="cond-drop-cont-wrap">
								<el-checkbox class="all-choose-cls"
										v-model="condObj.FlavorAll"
										@change="allChooseFlavor"
									>
									<span @click.stop="condObj.FlavorAll = !condObj.FlavorAll" v-lang="{lang: controlSto.language, lgid: -130}">select all</span>
								</el-checkbox>
								<el-checkbox-group v-model="condObj.flavorList" @change="toSearch()">
									<div class="cond-chbox-wrap">
										<el-checkbox class="cond-chbox-item" v-for="item in dataObj.flavorList" :key="'flavor_' + item.flavorCode" :value="item.flavorCode" :label="item.flavorName"  />
									</div>
								</el-checkbox-group>
							</div>
						</template>
					</SearchDrop>

					<SearchDrop class="cond-item">
						<template #title>
							<span v-lang="{lang: controlSto.language, lgid: -47}">Property</span>
							<!-- <el-popover placement="top-start">
								<el-checkbox class="all-choose-cls"
									v-model="condObj.PropertyAll"
									@change="allChooseProperty"
								>
								<span @click.stop="condObj.PropertyAll = !condObj.PropertyAll" v-lang="{lang: controlSto.language, lgid: -130}">select all</span>
							</el-checkbox>
								<template #reference>
									<span v-lang="{lang: controlSto.language, lgid: -47}">Property</span>
								</template> 
							</el-popover>-->
							
						</template>
						<template #dropcont>
							<div class="cond-drop-cont-wrap">
								<el-checkbox class="all-choose-cls"
										v-model="condObj.PropertyAll"
										@change="allChooseProperty"
									>
									<span @click.stop="condObj.PropertyAll = !condObj.PropertyAll" v-lang="{lang: controlSto.language, lgid: -130}">select all</span>
								</el-checkbox>
								<el-checkbox-group v-model="condObj.propList" @change="toSearch()">
									<div class="cond-chbox-wrap">
										<el-checkbox class="cond-chbox-item" v-for="item in dataObj.proptyList" :key="'prop_' + item.id" :value="item.propertyCode" :label="item.propertyName"  />
									</div>
								</el-checkbox-group>
							</div>
						</template>
					</SearchDrop>


					<SearchDrop class="cond-item">
						<template #title>
							<span v-lang="{lang: controlSto.language, lgid: -85}">Meridians</span>
							<!-- <el-popover placement="top-start">
								<el-checkbox class="all-choose-cls"
									v-model="condObj.MeridiansAll"
									@change="allChooseMeridians"
								>
								<span @click.stop="condObj.MeridiansAll = !condObj.MeridiansAll" v-lang="{lang: controlSto.language, lgid: -130}">select all</span>
							</el-checkbox>
								<template #reference>
									<span v-lang="{lang: controlSto.language, lgid: -85}">Meridians</span>
								</template>
							</el-popover> -->
						</template>
						<template #dropcont>
							<div class="cond-drop-cont-wrap">
								<el-checkbox class="all-choose-cls"
										v-model="condObj.MeridiansAll"
										@change="allChooseMeridians"
									>
									<span @click.stop="condObj.MeridiansAll = !condObj.MeridiansAll" v-lang="{lang: controlSto.language, lgid: -130}">select all</span>
								</el-checkbox>
								<el-checkbox-group v-model="condObj.meridiansList" @change="toSearch()">
									<div class="cond-chbox-wrap">
										<el-checkbox class="cond-chbox-item" v-for="item in dataObj.meridiansList" :key="'specy_' + item.id" :value="item.meridiansCode" :label="item.meridiansName"  />
									</div>
								</el-checkbox-group>
							</div>
						</template>
					</SearchDrop>

				</div>
				<div class="condition-right">
					<div class="ipt-cont">
						 <el-input clearable="true" class="ipt-search" v-model="condObj.searchword" autofocus :placeholder="searchPlace" />
						 <el-tag class="tags-search" v-if="condObj.word" closable @close="handleClose(tag)" round type="warning">
								<span class="tag-box">{{ condObj.word }}</span>
							</el-tag>
					</div>
					<SearchBtn class="search-item" @click.stop="toSearch()"/>
					<TableFilter class="search-item" :column="dataObj.columnList" :filterKey="condObj.filterKey" @onChg="chgTableCol"/>
					<SearchLoad
						:type="condObj.downCode"
						:uiCode="condObj.uiCode"
						:para="{'content': condObj.searchword,
						'flavor': condObj.flavorList.join(',') || '',
						'langCode': controlSto.language == 1 ? 'ENG' : 'CHN',
						'meridians': condObj.meridiansList.join(',') || '',
						'prepositionContent': condObj.word,
						'sortType': condObj.sort,
						'property': condObj.propList.join(',') || '',
						'uiTypeCode': condObj.uiCode}"
					/>
				</div>
			</div>
			<div class="cont-box">
				<uiTable
					:config="dataObj.tableConfig"
					:columnConfig="dataObj.columnConfig" 
					:loading="isLoading"
					:data="dataObj.dataList"
					:key="dataObj.searchTablevt">
						<template #[condObj.idField]="{ row }">
							<div class="jump-box" @click.stop="toClkItem(row)"><span>{{row[condObj.idField]}}</span></div>
						</template>
						<template #[condObj.nameField]="{ row }">
							<el-tooltip placement="top" :content="row[condObj.nameField]" v-if="row[condObj.nameField] && row[condObj.nameField].length > 20">
                <div class="jump-box table-jump-name" @click.stop="toClkItem(row)"><span>{{row[condObj.nameField]}}</span></div>
              </el-tooltip>
              <div v-else>
                <div class="jump-box" @click.stop="toClkItem(row)"><span>{{row[condObj.nameField]}}</span></div>
              </div>
						</template>
                </uiTable>

				<div class="page-box" v-if="condObj.total > 10">
					<uiPagination
						:total="condObj.total" :pageSize="condObj.pageSize" :pageIndex="condObj.pageIndex"
						@onSizeChange="chgSize" @onCurrentChange="chgCurrnt"/>
				</div>
			</div>

		</div>
    </div>
</template>



<script setup>
    import { ref, reactive, computed, onBeforeMount, watch } from 'vue'
    import BreadCrumb from '@/components/BreadCrumb.vue'
    import SearchBtn from '@/components/SearchBtn.vue'
    import TableFilter from '@/components/TableFilter.vue'
    import SearchLoad from '@/components/SearchLoad.vue'
    import SearchDrop from '@/components/SearchDrop.vue'
    import uiTable from '@/components/ui-table.vue'
    import uiPagination from '@/components/ui-pagination.vue'
		import uiEchart from '@/components/ui-echart.vue'
    import { debounce } from 'lodash'
		import { useRouter } from 'vue-router'
    import { controlStore } from '@/stores/control'
    import { langTxt, preventPeep, getFilterThArr, getFilterLangArr, computedgraphOptions } from '@/utils/util'

	 import { getTableThList, getHerbList, 
		getherbSearchList,
		getHerbStatistic,
		getsearchHerbTotal,
	getHerbFlavorList, getHerbPropertyList, getHerbmeridiansList } from '@/service/tcm'



    import searchImg from '@/assets/img/searchgrey.png'
    import moreImg from '@/assets/img/more-arrow.png'

	let searchDebounce = null;
		let totalresult = null;
	const controlSto = controlStore();
	const router = useRouter();
    const isLoading = ref(true);
		const chartFloavor = ref(null);
		const chartProperty = ref(null);
		const chartMeridians = ref(null);
		let optionFloavor = computedgraphOptions(langTxt(controlSto.language, '-110'), langTxt(controlSto.language, '-108'), [], true, 'center', '50%')
		let optionProperty = computedgraphOptions(langTxt(controlSto.language, '-109'), langTxt(controlSto.language, '-108'), [], true, 'center', '50%')
		let optionMeridians = computedgraphOptions(langTxt(controlSto.language, '-111'), langTxt(controlSto.language, '-108'), [], true, 'center', '50%')
		// const { flavorList } = toGetHerbFlavorList()
	const condObj = reactive({
		idField: '100716826576556928',
		nameField: '100716826576556929',
		searchword: '',
		filterKey: 'herb',
		uiCode: 'herb',
		downCode: 'herb',
		sort: 'Asc',
		catList: [],
		flavorList: [],
		propList: [],
		meridiansList: [], 
		word: '',
		sortType: 'Asc',
		catStr: '',
		flavorStr: [],
		propStr: [],
		meridiansStr: [], 
		total: 0,
		pageSize: 10,
		pageIndex: 1,
		FlavorAll: true,
		MeridiansAll: true,
		PropertyAll: true
	});
	const dataObj = reactive({
		queryTy: 0,
		searchResultTotal: 0,
		crumbList: [
            {
				fkey: '-16',
                lable: 'Home',
                name: 'home'
            }, {
				fkey: '-19',
                lable: 'Herb',
                name: 'herbsearch'
            }
        ],
		catList: [],
		flavorList: [],
		proptyList: [],
		meridiansList: [],
		// searchType: 1,
		searchTablevt: 1,
		columnList: [],
		tableConfig: {
			// size: 'small',
			'tooltip-effect': 'dark',
			'highlight-current-row': true,
			stripe: true,
			'header-cell-style': { background: '#BC9F77', color: '#FFF' },
		},
		columnConfig: [],
		dataList: []
	});
	const searchPlace = computed(() => {
		return langTxt(controlSto.language, '-15');
	});


    onBeforeMount(()=> {
				// initDebounce();
				getAllData();
				initPage();
        // toGetData();
				// totalresult && totalresult();
    });

	const initPage = () => {
		initQuery();
		// initCond();
		getTableTh();

	};
	const initDebounce = () => {
				totalresult = debounce(() => {
					if (router.currentRoute.value.query.t)togetsearchHerbTotal();
				}, 1000);
        searchDebounce = debounce((e) => {
					router.currentRoute.value.query.t ? getDataSearchList() : getDataList();
					router.currentRoute.value.query.t ? condObj.downCode = 'herbSearch' : condObj.downCode = 'herb';
        }, 1000);
    };
	const clkFloavor = (item) => {
		condObj.flavorList = [item.data.flavorCode]
		toSearch();
	}
	const clkProperty = (item) => {
		condObj.propList = [item.data.propertyCode]
		toSearch();
	}
	const clkMeridians = (item) => {
		condObj.meridiansList = [item.data.meridiansCode];
		toSearch();
	}
	const initQuery = () => {
		if(router.currentRoute.value.query && router.currentRoute.value.query.t && router.currentRoute.value.query.t == 1) {
			dataObj.queryTy = 1;
			dataObj.crumbList = [
				{
					fkey: '-16',
					lable: 'Home',
					name: 'home'
				}, {
					fkey: '-14',
					lable: 'search',
					name: 'search'
				}
			];
			if(router.currentRoute.value.query.wk) {
				condObj.word = router.currentRoute.value.query.wk || '';
        		// condObj.word = condObj.searchword;
			} else {
				condObj.word = '';
			}
		} else {
			dataObj.queryTy = 0;
			dataObj.crumbList = [
				{
					fkey: '-16',
					lable: 'Home',
					name: 'home'
				}, {
					fkey: '-19',
					lable: 'Herb',
					name: 'herbsearch'
				}
			];
			condObj.searchword = '';
		}
    };
	const reSwitch = () => {
		initCond();
    toGetData();
	};

	const toGetHerbStatistic = () => {
		const param = {
			content: condObj.searchword,
			// flavor: condObj.flavorList.join(','),
			// meridians: condObj.meridiansList.join(','),
			// property: condObj.propList.join(',')
		}
		getHerbStatistic(param).then(res => {
			if(res.success) {
				let flavorStatistic = [], propertyStatistic = [], meridiansStatistic = [];
				for(let key in res.data.flavorStatistics) {
					dataObj.flavorList.forEach(e => {
						if (key == e.flavorCode) {
							flavorStatistic.push({flavorCode: e.flavorCode, name: e.flavorName, value: res.data.flavorStatistics[key]})
						}
					})
				}
				optionFloavor.series[0].data = flavorStatistic;
				optionFloavor.title.text = langTxt(controlSto.language, '-110');
				optionFloavor.title.subtext = langTxt(controlSto.language, '-108');
				optionFloavor.toolbox.feature.saveAsImage.title = controlSto.language == 1 ? 'Download' : '下载';
				flavorStatistic.length < 5 ? optionFloavor.legend.top = 'center' : ''
				chartFloavor.value.initEchart()
				for(let o in res.data.propertyStatistics) {
					dataObj.proptyList.forEach(e => {
						if(o == e.propertyCode) {
							propertyStatistic.push({name: e.propertyName, value: res.data.propertyStatistics[o], propertyCode: e.propertyCode})
						}
					})
				}
				optionProperty.series[0].data = propertyStatistic;
				optionProperty.title.text = langTxt(controlSto.language, '-109');
				optionProperty.title.subtext = langTxt(controlSto.language, '-108');
				optionProperty.toolbox.feature.saveAsImage.title = controlSto.language == 1 ? 'Download' : '下载';
				propertyStatistic.length < 5 ? optionProperty.legend.top = 'center' : ''
				chartProperty.value.initEchart()
				for(let v in res.data.meridiansStatistics) {
					dataObj.meridiansList.forEach(k => {
						if (v == k.meridiansCode) {
							meridiansStatistic.push({name: k.meridiansName, value: res.data.meridiansStatistics[v], meridiansCode: k.meridiansCode})
						}
					})
				}
				optionMeridians.series[0].data = meridiansStatistic;
				optionMeridians.title.text = langTxt(controlSto.language, '-111');
				optionMeridians.title.subtext = langTxt(controlSto.language, '-108');
				optionMeridians.toolbox.feature.saveAsImage.title = controlSto.language == 1 ? 'Download' : '下载';
				meridiansStatistic.length < 5 ? optionMeridians.legend.top = 'center' : ''
				chartMeridians.value.initEchart()
			}
		})
	}
	const initCond = () => {
		// toGetHerbCatList();
		
		// toGetHerbFlavorList();
		// toGetHerbPropertyList();
		// toGetHerbMeridiansList();
		getAllData();
		
	};
	const handleClose = () => {
		condObj.word = '';
		togetsearchHerbTotal();
		getDataSearchList();
	}
	const togetsearchHerbTotal = (param) => {
		getsearchHerbTotal({
			langCode: controlSto.language == 1 ? "ENG" : "CHN",
			uiTypeCode: condObj.uiCode,
			flavor: condObj.flavorList.join(',') || '',
			meridians: condObj.meridiansList.join(',') || '',
			prepositionContent: condObj.word || '',
			property: condObj.propList.join(',') || ''
		}).then(res => {
			if(res.success && res.data) {
				dataObj.searchResultTotal = res.data.herbs || 0;
			}
		})
	}
	const getAllData = () => {
		let params = {
					langCode: controlSto.language == 1 ? 'ENG' : 'CHN',
			};
			condObj.flavorList = [];
			condObj.propList = [];
			condObj.meridiansList = [];
		Promise.all([getHerbFlavorList(params), getHerbPropertyList(params), getHerbmeridiansList(params)]).then(res => {
			if (res[0].success && res[0].data) {
						res[0].data.forEach(e => {
							condObj.flavorList.push(e.flavorCode)
						})
						condObj.FlavorAll = true;
						dataObj.flavorList = res[0].data || [];
				}
				if (res[1].success && res[1].data) {
						res[1].data.forEach(e => {
							condObj.propList.push(e.propertyCode)
						})
						condObj.PropertyAll = true;
						dataObj.proptyList = res[1].data || [];
				}
				if (res[2].success && res[2].data) {
					res[2].data.forEach(e => {
						condObj.meridiansList.push(e.meridiansCode)
					})
					condObj.MeridiansAll = true;
					dataObj.meridiansList = res[2].data || [];
				}
				if (!router.currentRoute.value.query.t) toGetHerbStatistic();
				router.currentRoute.value.query.t ? getDataSearchList() : getDataList();
				router.currentRoute.value.query.t ? condObj.downCode = 'herbSearch' : condObj.downCode = 'herb';
				if (router.currentRoute.value.query.t)togetsearchHerbTotal();
		}).catch(() => {});
	}
	const getTableTh = () => {
        let params = {
            uiCode: condObj.uiCode,
            langCode: 'ENG,CHN'
        };

		getTableThList(params).then((res) => {
            // isLoading.value = false;
            if (res.success) {
                let arr = res.data || [];

                let thArr = getFilterThArr(arr, condObj.filterKey);
				let langArr = getFilterLangArr(thArr);
				controlSto.setLangList(langArr);
				dataObj.columnList = thArr;
            }
        }).catch(() => {
            // isLoading.value = false;
        });
    };

	
	const chgTableCol = (e) => {
		dataObj.columnConfig = e || [];
		dataObj.searchTablevt = new Date().valueOf();
    };

	const toGetData = () => {
        // searchDebounce && searchDebounce();
				router.currentRoute.value.query.t ? getDataSearchList() : getDataList();
    };
		//getherbSearchList
	const getDataList = () => {
		let params = {
      langCode: controlSto.language == 1 ? 'ENG' : 'CHN',
			content: condObj.searchword || '',
      uiTypeCode: condObj.uiCode,
			sortType: condObj.sortType,
			// herbClsCode: condObj.catStr || '',
			flavor: condObj.flavorList.join(',') || '',
			property: condObj.propList.join(',') || '',
			meridians: condObj.meridiansList.join(',') || '',
			pageNo: condObj.pageIndex || 10,
			pageSize: condObj.pageSize || 1
		}
        isLoading.value = true;
		getHerbList(params).then((res) => {
				isLoading.value = false;
				if (res.success && res.data && res.data.records) {
						dataObj.dataList = res.data.records || [];
						condObj.total = res.data.totalCount || 0;
				}
			}).catch(() => {
					isLoading.value = false;
			});
    };
		const getDataSearchList = () => {
			let params = {
      langCode: controlSto.language == 1 ? 'ENG' : 'CHN',
			content: condObj.searchword|| '',
      uiTypeCode: condObj.uiCode,
			sortType: condObj.sortType,
			// herbClsCode: condObj.catStr || '',
			flavor: condObj.flavorList.join(',') || '',
			property: condObj.propList.join(',') || '',
			meridians: condObj.meridiansList.join(',') || '',
			pageNo: condObj.pageIndex || 10,
			pageSize: condObj.pageSize || 1,
			prepositionContent: condObj.word
		}
    isLoading.value = true;
		getherbSearchList(params).then((res) => {
				isLoading.value = false;
				if (res.success && res.data && res.data.records) {
						dataObj.dataList = res.data.records || [];
						condObj.total = res.data.totalCount || 0;
				}
			}).catch(() => {
					isLoading.value = false;
			});
		}
	const chgSize = (e) => {
        condObj.pageSize = e || 10;
        toGetData();
    };
    const chgCurrnt = (e) => {
        condObj.pageIndex = e || 1;
        toGetData();
    };

	const toSearch = () => {
		// condObj.word = condObj.searchword;
		condObj.sortType = condObj.sort;
		condObj.catStr = condObj.catList;
		condObj.flavorStr = condObj.flavorList.join(',');
		condObj.propStr = condObj.propList.join(',');
		condObj.meridiansStr = condObj.meridiansList.join(',');

		condObj.pageIndex = 1;
		toGetData();
	};

	const allChooseMeridians = () => {
		if(condObj.meridiansList.length == dataObj.meridiansList.length) {
			condObj.meridiansList = []
		} else {
			condObj.meridiansList = [];
			dataObj.meridiansList.forEach(e => {
				condObj.meridiansList.push(e.meridiansCode)
			})
		}
	}
	const allChooseProperty = () => {
		if(condObj.propList.length == dataObj.proptyList.length) {
			condObj.propList = []
		} else {
			condObj.propList = [];
			dataObj.proptyList.forEach(e => {
				condObj.propList.push(e.propertyCode)
			})
		}
	}
	const allChooseFlavor = () => {
		if(condObj.flavorList.length == dataObj.flavorList.length) {
			condObj.flavorList = [];
		} else {
			condObj.flavorList = [];
			dataObj.flavorList.forEach(e => {
				condObj.flavorList.push(e.flavorCode)
			})
		}
	}
	const toMore = () => {
        router.push({ name: 'herbsearch', query: { origin: 'header' } });
				condObj.word = null;
    };

	const toClkItem = (rowItem) => {
        router.push({ name: 'herbdetail', query: {id: rowItem[condObj.idField], name: rowItem[condObj.nameField]} });
    };

	watch(() => router.currentRoute.value.name, (nv, ov) => {
		if(nv != ov) {
            initQuery();
		}
	});
	watch(() => [controlSto.language, router.currentRoute.value.wk], (nv, ov) => {
		if(nv != ov && ov) {
			reSwitch();
		}
	});

	watch(() => [condObj.flavorList, condObj.propList, condObj.meridiansList], (n, v) => {
		// if(n != v) toSearch()
		if(n[0].length && n[0].length == dataObj.flavorList.length) condObj.FlavorAll = true;
		else condObj.FlavorAll = false;

		if(n[1].length && n[1].length == dataObj.proptyList.length) condObj.PropertyAll = true;
		else condObj.PropertyAll = false;

		if(n[2].length && n[2].length == dataObj.meridiansList.length) condObj.MeridiansAll = true;
		else condObj.MeridiansAll = false;
	})
   
</script>

<style lang="scss" scoped>
	.herb-search-page {
		margin-bottom: 32px;
		height: 100%;
		min-height: calc(100vh - 250px);
		text-align: center;
		background-size: 100% 100%;
		.search-cont {
			display: inline-block;
			width: 100%;
			text-align: left;
			.crose-ui-pie {
				display: flex;
				justify-content: space-around;
				padding: 24px 0;
				.echart-item {
					height: 240px;
					width: 33.33%;
					padding: 8px 8px 0;
				}
			}
			.total-box {
				padding: 8px 0 32px;
				.total-wrap {
					display: flex;
					height: 50px;
					padding: 0 24px;
					justify-content: space-between;
					line-height: 50px;
					background-color: #F5F7FA;
					.tatal-cont {
						font-size: 16px;
						.locate-box {
							position: relative;
							display: inline-block;
							top: 2px;
							padding-right: 10px;
							.search-img {
								height: 16px;
							}
						}
						.tatal-txt {
							display: inline-block;
							padding-right: 4px;
						}
					}
					.more-box {
						.more-wrap {
							cursor: pointer;
							.more-txt {
								display: inline-block;
								font-size: 16px;
								font-weight: 600;
								color: #967846;
							}
							.more-img-box {
								position: relative;
								display: inline-block;
								top: 3px;
								.more-img {
									height: 16px;
								}
							}
						}
					}
				}
			}

			.condition-box {
				display: flex;
				padding-bottom: 32px;
				justify-content: space-between;
				// border: 1px solid red;
				.condition-left {
					.cond-item {
						margin-right: 16px;
						margin-bottom: 8px;
					}
				}
				.condition-right {
					display: flex;
					.ipt-cont {
						display: inline-block;
						padding-right: 16px;
						position: relative;
						.tags-search {
							position: absolute;
							left: 0;
							top: 36px;
							max-width: 150px;
						}
						.ipt-search {
							width: 200px;
						}
					}
					.search-item {
						margin-right: 16px;
					}
				}
			}
			.cont-box {
				.jump-box {
					font-weight: 400;
					font-size: 14px;
					color: #1677FF;
					cursor: pointer;
				}
			}



		}
	}
	
</style>


<style lang="scss">
    .cond-item-drop-box {
        .cond-drop-cont-wrap {
			max-height: 260px;
			overflow-y: auto;
			.cond-chbox-wrap {
				width: 200px;
				padding: 0;
				.cond-chbox-item {
					width: 188px;
					padding-left: 12px;
					margin-right: 0;
				}

				.el-checkbox__inner:hover {
					border-color: #BC9F77;
				}
				.el-checkbox__input.is-checked .el-checkbox__inner {
					background-color: #BC9F77;
					border-color: #BC9F77;
				}
				.el-checkbox__input.is-checked + .el-checkbox__label {
					color: #BC9F77;
				}
			}

			.cond-radio-wrap {
				width: 200px;
				padding: 0;
				.cond-radio-item {
					width: 188px;
					padding-left: 12px;
					margin-right: 0;
				}
				.el-radio__inner:hover {
					border-color: #BC9F77;
				}
				.el-radio__input.is-checked .el-radio__inner {
					background-color: #BC9F77;
					border-color: #BC9F77;
				}
				.el-radio__input.is-checked + .el-radio__label {
					color: #BC9F77;
				}
			}
        }
    }
</style>